<template>
  <div class="view-container">

    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData?.sellerName }}
          </span>
          <el-tag size="small" type="warning" style="margin-right: 20px">
            {{ getLabel('confirmStatus', formData?.confirmStatus) }}
          </el-tag>
          <!-- <el-tag size="small" type="warning"
            v-if="(formData?.sellerStatus === '2' || formData?.sellerStatus === '4') && formData?.flowStatus === 'DOING'">
            变更审核中
          </el-tag> -->

        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:change']}" class="main-btn" size="small"
          type="primary" @click="handleEdit(formData,2)">
          变更信息
        </el-button>
        <!-- <template v-if="formData">
          <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:dele'],
              bool:formData.sellerStatus === '-2' || formData.sellerStatus === '-1'}" class="main-btn" size="small"
            type="primary" @click="handlDelete(formData?.id)">
            删除
          </el-button>

          <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:edit'],
            bool:formData.sellerStatus === '-2' || formData.sellerStatus === '-1' || formData.sellerStatus === '-3'}"
            class="main-btn" size="small" type="primary" @click="handleEdit(formData,1)">
            编辑
          </el-button>

          <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:change'],
            bool:(formData.sellerStatus === '2' || formData.sellerStatus === '4') && formData.flowStatus !== 'DOING' }"
            class="main-btn" size="small" type="primary" @click="handleEdit(formData,2)">
            变更信息
          </el-button>

        </template> -->
      </template>
    </header-module>

    <div style="background-color: white;padding-top: 20px">
      <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="商销客户编号：">
              <span>{{ formData?.sellerNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="企业所在地区：">
              {{ formData?.provinceName }}/{{ formData?.cityName }}/{{ formData?.areaName }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData?.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="main-content" style="margin-top: 20px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="详细信息" name="1">
          <shanPpinInfo v-if="activeName === '1'" :form-data="formData" />
        </el-tab-pane>
        <el-tab-pane label="商销合同" name="2">
          <contract v-if="activeName === '2'" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="3">
          <followUp v-if="activeName === '3'" :objectId="formData?.id" customerType="3" />
        </el-tab-pane>
        <el-tab-pane label="修改记录" name="4">
          <operation-view v-if="activeName === '4'" mode="seller" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <newForm ref="newFormRef" @succsess="succsess" />

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  components: {
    shanPpinInfo: defineAsyncComponent(() => import("../modules/details.vue")),
    newForm: defineAsyncComponent(() => import("../modules/newForm.vue")),
    contract: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contract/contract.vue")
    ),
    followUp: defineAsyncComponent(() =>
      import("@CRM/views/marketing/customer/modules/followUp.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      formData: {},
      activeName: "1",
      newFormRef: null,
      contractData: {
        id: Number(route.query.id),
        name: "",
        contractType: "seller",
        contractObjectType: "seller",
        title: "商销合同详情",
        disabled: true,
        pms: ["crm:marketing:cooperationInformation:enterprise:contract:all"],
      },
    });

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.shangPin.SHANGPIN_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
          data.contractData.name = res.data.data.sellerName;
        }
      });
    };

    //删除
    const handlDelete = (id) => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.shangPin.SHANGPIN_DELETE(id).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: "删除成功",
              });
              handlBack();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    //编辑
    const handleEdit = (val, num) => {
      var title = "";
      if (num === 1) {
        title = "编辑商销客户";
      }
      if (num === 2) {
        title = "变更商销客户";
      }

      data.newFormRef.open(title, val);
    };

    const succsess = () => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    };

    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlDelete,
      handleEdit,
      succsess,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>
